<!DOCTYPE html>
<html lang="ch">

<head>
  <meta charset="UTF-8">
  <!--这一句很关键，让手机的缩放格式与电脑相同，以防出现手机显示的大小与电脑不同-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册</title>

  <!--本地版-->
  <link rel="stylesheet" href="plugins/elementUI_2.15.7/index.css" />
  <script src="plugins/vue_2.6.14/vue.js"></script>
  <script src="plugins/elementUI_2.15.7/index.js"></script>
  <script src="plugins/axios/axios_0_27_2.min.js"></script>
  <script src="plugins/jquery/jquery-3.3.1.min.js"></script>

  <!-- 公共样式 -->
  <link rel="stylesheet" href="css/common/common.css">

  <!-- 引入头部 -->
  <script src="js/common/header.js"></script>
  <link rel="stylesheet" href="css/common/header.css">

  <!-- 接口地址全局变量 -->
  <script src="/js/common/jieKouAddress.js"></script>
  <!-- 全局函数 -->
  <script src="/js/common/commonMethod.js"></script>

  <!-- 当前页主样式 -->
  <link rel="stylesheet" href="css/login.css" />
</head>

<body>

  <div id="app">
    <!-- 公共头部 -->
    <header id="headerContent"></header>
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="23" :md="16">
        <!--内容-->
        <div class="content">
          <el-row :gutter="20" type="flex" justify="center">
            <!--左侧-->
            <el-col class="left" :xs="24" :sm="24" :md="12" :lg="14" :xl="14" v-show="vueHeader.screenWidth >= 992">
              <div class="hello">
                <h1>牛奶盒MilkBox</h1>
                <p>奶盒平台欢迎您登录</p>
              </div>
            </el-col>
            <!--右侧-->
            <el-col :xs="24" :sm="18" :md="12" :lg="10" :xl="10">
              <div class="form-card">
                <!-- 表单 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                  <!-- 邮箱 -->
                  <el-form-item prop="email">
                    <el-input v-model="ruleForm.email" placeholder="邮箱(xxxxxx@mail.com)"></el-input>
                  </el-form-item>
                  <!-- 图片验证码 -->
                  <el-form-item required>
                    <el-form-item prop="pictureVerify">
                      <el-input v-model="ruleForm.pictureVerify" placeholder="图片验证码" :disabled="pictureDisabled">
                        <el-button slot="append" class="picture-verification-button" type="success"
                          @click="getPictureVerificationCode" :style="pictureVerificationCodeStyle"
                          :disabled="pictureDisabled">
                          &nbsp;&nbsp;
                        </el-button>
                      </el-input>
                    </el-form-item>
                  </el-form-item>
                  <!-- 邮箱验证码 -->
                  <el-form-item required>
                    <el-form-item prop="emailVerify">
                      <el-input v-model="ruleForm.emailVerify" placeholder="邮箱验证码">
                        <el-button class="email-verification-button" type="success" slot="append"
                          :disabled="emailButtonDisabled" @click="sendEmailVerificationCode">
                          {{emailButtonTextTime == 0 ? "发送验证码" : "发送验证码(" + emailButtonTextTime
                          + ")"}}
                        </el-button>
                      </el-input>
                    </el-form-item>
                  </el-form-item>
                  <el-form-item prop="userAgreement">
                    <el-checkbox v-model="ruleForm.userAgreement" label="勾选此项代表您同意">
                    </el-checkbox>
                    <a href="userAgreement.html" target="_blank">《用户协议》</a>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="success" @click="submitForm('ruleForm')" :disabled="loginButtonDisabled">
                      {{loginButtonDisabled ? "登陆/注册中..." :
                      "登录/注册"}}</el-button>
                    <el-button type="danger" plain @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 公共尾部 -->
    <!-- <footer id="footerContent"></footer> -->
  </div>
  <!-- vue的js文件，必须放到这个地方，放到head中不生效 -->
  <script src="js/login.js"></script>

</body>

</html>